<template>
    <div class="detailPage">
        <ScrollView>
            <div>
                <!-- 物品详情图片轮播图  start -->
                <SwiperComp class="swiper-container" ref="loop" :options=" opt ">
                    <template #slide>
                        <div class="swiper-slide" v-for="(item, index) in 4" :key="index">
                            <img :src="product.img" alt />
                        </div>
                    </template>
                    <template v-slot:pagination>
                        <div class="swiper-pagination"></div>
                    </template>
                    <template v-slot:default>
                        <div class="left" @touchstart=" $router.go(-1) ">
                            <span class="iconfont icon-left"></span>
                        </div>
                        <div class="cart">
                            <span class="iconfont icon-cart"></span>
                        </div>
                    </template>
                </SwiperComp>
                <!-- 物品详情图片轮播图  start -->
                <!-- 物品介绍  start -->
                <div class="introduct">
                    <div>
                        <sup>￥</sup>
                        <span>{{product.price}}</span>
                        <span>￥{{product.orgPrice}}</span>
                    </div>
                    <div>{{product.title}}</div>
                    <div>免运费</div>
                </div>
                <!-- 物品介绍  end -->
                <!-- 物品优惠  start -->
                <div class="discount">
                    <div>
                        <span>优惠</span>
                        <span>
                            领劵后，下单至少可减
                            <span>3元</span>
                        </span>
                        <span>领劵></span>
                    </div>
                    <div>
                        <div>店铺优惠券</div>
                        <div v-for="(item, index) in 2" :key="index">
                            <div></div>
                            <div>满98减3</div>
                            <div></div>
                        </div>
                    </div>
                    <div>
                        <span>促销</span>
                        <span>满折</span>
                        <span>满三件打9.5折，满99折打8.5折</span>
                        <span>更多></span>
                    </div>
                    <div>
                        <div v-for="(item, index) in 3" :key="index">
                            <span class="iconfont icon-success"></span>
                            <span>72小时发货</span>
                        </div>
                    </div>
                </div>
                <!-- 物品优惠  end -->
                <!-- 买家评论  start -->
                <div v-if="detailData" class="comment">
                    <div>
                        <div>{{detailData.bottomText}}</div>
                        <div>更多></div>
                    </div>
                    <div>
                        <div v-for="(item, index) in detailData.rateTags" :key="index"> {{item.value}}({{item.num}})</div>
                    </div>
                    <CommentItem :comments="detailData.list"/>
                </div>
                <div v-if="!detailData" class="blank">暂无评论</div>
                <!-- 买家评论  end -->
            </div>
        </ScrollView>
        <!-- 底部  start -->
        <div class="bottom">
            <div>
                <span class="iconfont icon-shop"></span>
                <p>店铺</p>
            </div>
            <div>
                <span class="iconfont icon-message"></span>
                <p>客服</p>
            </div>
            <div>
                <span class="iconfont icon-like"></span>
                <p>收藏</p>
            </div>
            <div @click="addItem()">加入购物车</div>
            <div>立即购买</div>
        </div>
        <!-- 底部  end -->
    </div>
</template>

<script>
import CommentItem from "../components/CommentItem";
import { mapMutations } from 'vuex'

export default {
    name:"detail",
    data() {
        return {
            opt: {
                pagination: {
                    el: ".swiper-pagination"
                },
                autoplay: true,
                loop: true,
                effect: "coverflow",
                slidesPerView: 1.6,
                centeredSlides: true,
                coverflowEffect: {
                    rotate: 30,
                    stretch: 0,
                    depth: 30,
                    modifier: 1.5,
                    slideShadows: true
                }
            },
            product:[],
            detailData:{}
        };
    },
    components: {
        CommentItem
    },
    methods: {
        ...mapMutations(["setCartItem"]),
        setDetailData(){
            this.$api.loadDetail({
                type:1,
                itemId:this.$route.params.goodsId,
                appPlat:"m",
            })
            .then(data =>{
                this.detailData = data;
            })
            .catch(this.$error);
        },
        //因为没有购物车接口，直接将详情页的信息给到vuex中
        addItem(){
            let token = localStorage.getItem("token");
            if(token){
                this.setCartItem(this.product);
                this.$showTip("添加成功");
            }else{
                 this.$showTip("请先登录",2);
                 setTimeout(()=>{
                     this.$router.push("/login");
                 },1000);
            }
        }
    },
    mounted() {
        let str = localStorage.getItem(this.$route.params.goodsId);
        this.product = JSON.parse(str);
        this.setDetailData();
    }
};
</script>

<style lang="less" scoped>
.text-cut(@col) {
    overflow: hidden;
    /* 伸缩盒子 */
    display: -webkit-box;
    /* 设置盒子的子元素的排列方向 */
    -webkit-box-orient: vertical;
    /* 超出几行出现省略号 */
    -webkit-line-clamp: @col;
}

.common {
    float: left;
    width: 13%;
    height: 100%;
    color: @66;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid @de;
    span {
        font-size: 32px;
    }
    p {
        font-size: 26px;
    }
}

.blank{
    width: 100vw;
    height: 100px;
    background-color: white;
    text-align: center;
    line-height: 100px;
}

.detailPage {
    width: 100vw;
    position: absolute;
    top: 0;
    bottom: @h;
    > div:first-child {
        width: 100%;
        height: 100%;
        // position: absolute;
        // top: 0;
        // bottom: @h;
        overflow: hidden;
        background-color: @ef;
        .swiper-container {
            position: relative;
            img {
                width: 100%;
                height: 700px;
                margin-top: 10px;
            }
            .left {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 60px;
                height: 60px;
                background-color: rgba(0, 0, 0, 0.5);
                text-align: center;
                border-radius: 30px;
                z-index: 888;
                span {
                    color: @white;
                    font-size: 32px;
                    line-height: 60px;
                }
            }
            .cart {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 60px;
                height: 60px;
                background-color: rgba(0, 0, 0, 0.5);
                text-align: center;
                border-radius: 30px;
                z-index: 888;
                span {
                    color: @white;
                    font-size: 32px;
                    line-height: 60px;
                }
            }
        }
        .introduct {
            height: 245px;
            background-color: @white;
            padding: 0 20px;
            div:nth-child(1) {
                span:nth-of-type(1) {
                    font-size: 45px;
                    font-weight: bold;
                }
                span:nth-of-type(2) {
                    color: @99;
                    font-size: 26px;
                    text-decoration: line-through;
                    margin-left: 20px;
                }
            }
            div:nth-child(2) {
                font-size: 34px;
                text-indent: 40px;
                margin: 20px 0;
                .text-cut(2);
            }
            div:nth-child(3) {
                color: @99;
                font-size: 25px;
            }
        }
        .discount {
            background-color: @white;
            margin: 20px 0;
            padding: 0 20px;
            &::after {
                content: "";
                display: block;
                clear: both;
            }
            > div:nth-child(1) {
                padding: 20px 0;
                font-size: 28px;
                > span:nth-child(1) {
                    color: @99;
                    font-weight: bold;
                }
                > span:nth-child(2) {
                    font-weight: bold;
                    margin-left: 40px;
                    span {
                        color: @pink;
                    }
                }
                > span:nth-child(3) {
                    color: @99;
                    font-weight: bold;
                    float: right;
                }
            }
            > div:nth-child(2) {
                padding: 0 70px;
                &::after {
                    content: "";
                    display: block;
                    clear: both;
                }
                > div:first-child {
                    width: 170px;
                    height: 60px;
                    background-color: @pink1;
                    border-radius: 30px;
                    text-align: center;
                    line-height: 60px;
                    color: @light-pink;
                    font-size: 28px;
                    font-weight: bold;
                    float: left;
                    margin-right: 20px;
                }
                > div:nth-child(n + 2) {
                    width: 170px;
                    height: 60px;
                    background-color: @pink1;
                    position: relative;
                    float: left;
                    margin-right: 20px;
                    > div:nth-child(1) {
                        width: 30px;
                        height: 30px;
                        border-radius: 15px;
                        background-color: @white;
                        position: absolute;
                        top: 15px;
                        left: -15px;
                    }
                    > div:nth-child(2) {
                        color: @light-pink;
                        font-size: 28px;
                        font-weight: bold;
                        line-height: 60px;
                        text-align: center;
                    }
                    > div:nth-child(3) {
                        width: 30px;
                        height: 30px;
                        border-radius: 15px;
                        background-color: @white;
                        position: absolute;
                        top: 15px;
                        right: -15px;
                    }
                }
            }
            > div:nth-child(3) {
                padding: 20px 0;
                font-size: 28px;
                border-bottom: 1px solid @de;
                > span:nth-child(1) {
                    color: @99;
                    font-weight: bold;
                }
                > span:nth-child(2) {
                    display: inline-block;
                    width: 80px;
                    height: 40px;
                    border-radius: 20px;
                    background-color: @pink1;
                    color: @light-pink;
                    font-size: 28px;
                    font-weight: bold;
                    line-height: 40px;
                    text-align: center;
                    margin-left: 40px;
                }
                > span:nth-child(3) {
                    font-weight: bold;
                    margin-left: 20px;
                }
                > span:nth-child(4) {
                    color: @99;
                    font-weight: bold;
                    float: right;
                }
            }
            > div:nth-child(4) {
                display: flex;
                justify-content: space-between;
                padding: 30px 0;
                > div {
                    span:first-child {
                        color: @pink;
                        font-size: 34px;
                    }
                    span:last-child {
                        font-size: 28px;
                        font-weight: bold;
                    }
                }
            }
        }
        .comment {
            background-color: @white;
            padding: 0 20px;
            > div:nth-child(1) {
                display: flex;
                justify-content: space-between;
                > div {
                    color: @99;
                    font-size: 28px;
                    font-weight: bold;
                    margin-top: 20px;
                }
            }
            > div:nth-child(2) {
                &::after {
                    content: "";
                    display: block;
                    clear: both;
                }
                > div {
                    height: 60px;
                    background-color: @pink1;
                    text-align: center;
                    line-height: 60px;
                    color: @light-pink;
                    font-size: 28px;
                    font-weight: bold;
                    float: left;
                    margin-right: 20px;
                    padding: 0 10px;
                    margin-top: 20px;
                }
            }
        }
    }
    .bottom {
        width: 100vw;
        height: @h;
        position: absolute;
        left: 0;
        bottom: -@h;
        &::after {
            content: "";
            display: block;
            clear: both;
        }
        div:nth-child(1) {
            &:extend(.common all);
        }
        div:nth-child(2) {
            &:extend(.common all);
        }
        div:nth-child(3) {
            &:extend(.common all);
        }
        div:nth-child(4) {
            float: left;
            width: 33%;
            height: 100%;
            background-color: @pink1;
            color: @light-pink;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            line-height: @h;
        }
        div:nth-child(5) {
            float: left;
            width: 27%;
            height: 100%;
            background-color: @pink;
            color: @white;
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            line-height: @h;
        }
    }
}
</style>